import { ref } from 'vue'

export function useModal() {
  const modalContentStyle = ref({
    transform: 'translateY(-50px)',
    opacity: '0'
  })

  const openModal = () => {
    setTimeout(() => {
      modalContentStyle.value = {
        transform: 'translateY(0)',
        opacity: '1'
      }
    }, 10)
  }

  const closeModal = (emit: (event: 'update:show', value: boolean) => void) => {
    modalContentStyle.value = {
      transform: 'translateY(-50px)',
      opacity: '0'
    }
    setTimeout(() => {
      emit('update:show', false)
    }, 300)
  }

  const handleModalClick = (e: Event, emit: (event: 'update:show', value: boolean) => void) => {
    if (e.target === e.currentTarget) {
      closeModal(emit)
    }
  }

  return {
    modalContentStyle,
    openModal,
    closeModal,
    handleModalClick
  }
}